<template>
  <div id="app">
<!--    按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <router-view/>
<!--走马灯-->
    <el-carousel :interval="4000" type="card" :height="bannerHeight + 'px'">
      <el-carousel-item v-for="item in imgList" :key="item">
        <el-image
          style="width: 200px; height: 200px"
          :src="item"
          :preview-src-list="srcList"
          fit="fill"></el-image>

      </el-carousel-item>
    </el-carousel>
<!--    大图显示-->

<!--置顶-->
    Scroll down to see the bottom-right button.
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
      <div
        style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
      >
        UP
      </div>
    </el-backtop>

  </div>
</template>

<script>
import img1 from '../config/58997494646_avatar.png'
import img2 from '../config/71479207647_avatar.png'
import img3 from '../config/77237556187_avatar.png'
import img4 from '../config/102542474638_avatar.png'
import img5 from '../config/562586887420903_avatar.png'
import img6 from '../config/2031513903306015_avatar.png'
export default {
  name: 'App',
  data() {
    return {
      imgList: [img1, img2, img3, img4, img5, img6],
      srcList: [img1, img2, img3, img4, img5, img6],
      bannerHeight: 200,
      screenWidth: 0,
  }
  },

  mounted() {

    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    }
  },

  methods: {
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 600 / 1920 * this.screenWidth;
    }
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
